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1. INTRODUCTION 

User Interface is an aggregate of the means by which system users interact with machines, devices, 
computer programs, or other tools. UI provides the means: Input, allowing the user to control the system; and 
Output, enabling the system to inform users. Blair-Early and Zender [1] meanwhile, user experience (UX) is 
a person's perception and response to the use of a product, a system used, or service by providing an 
assessment of how satisfied and comfortable using it is. Nikam et al. [2] the basic principle in designing a 
UX is that users have the experience that users determine to have the experience to the level of satisfaction 
based on satisfaction and comfort in interacting with products, systems, or service. If the UX features 
are developing well but there are no end-users who are satisfied and comfortable, the value of UX will be 
low [3],[4]. 

TCSD method is one of the methods used to design UI/UX in accordance with the task needs of 
system users through useability testing, so the user interface design becomes better and optimal, and easy to 
use. S. Greenberg [5]. TCSD is a process that can be describing as; 1) a concrete description in the form of 
the real world, such as doing every task in everyday life [6], 2) Determine the users and assignment in the 
system based on the descriptions of the users, 3) designing a prototype of an interface that meets system 
requirements, 4) evaluate the interface by performing a task-centered walkthrough [7], [8]. 

The research object case study is PAUD Kuntum Mekar in the village of Baros Serang Banten. The 
problem that exists in PAUD Kuntum Mekar is that the current education system requires communication 
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between parents and teachers so that it requires informative and easy-to-use media. Beside that, the 
researchers designed a UI/UX model for the needs of a web-based integrative holistic PAUD monitoring 
information system. This research uses the TCSD method, so the system design developed is followed by 
user needs, easy to use, interactive, and informative. The purpose of this study was to provide up-to-date 
information about activities at PAUD Kuntum Mekar is information on a balanced nutrition menu, 
information on health care, information on child development, and immunization schedules. The scope of 
this studied discusses UI/UX design based on user needs tasks through the stages in TCSD. The contribution 
of this research is in the form of a integrative holistic UI/UX design to make it easier for every user involved 
with the system starting from health monitoring management, PAUD data management, and PAUD 
monitoring card management. 


2. RESEARCH METHOD 

The software development method in this research is to use the TCSD method because it makes it 
easier for the author to group the work based on the duties and responsibilities of the user required by the 
Integrative Holistic monitoring system for children of early childhood. The stages of the research method in 
TCSD can be seen in Figure 1. 
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Figure 1. The stages of the research method using TCSD 


The flow of the integrative holistic UI/UX design starts from the following stages are [9], [10]: 

a. The preparation stage, at this stage the identification of problems from the Integrative holistic 
monitoring system of children of early childhood is carried out. The problem-solving solution was 
created, by determining the scope and objectives of the systems that fit the business process, 

b. System user identification stage, at this stage a description of the system is carried out, identifying 
system users, defining the scope of the system and describing the potential of the existing system, 

c. The system user requirements analysis stage, at this stage, the component specifications for UI/UX are 
prepared, 

d. Design stage scenario system creation, at this stage the user interface design is carried out according to 
user needs and compiles the story board of each UI, 

e. The UI search evaluation stage, at this stage, determine who the system user is, assign system user, the 
required UI and business process flow as well as UI improvements based on search results. 
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Sampling testing was carried out on eight users of the system consisting of teachers, parents of 
PAUD and health experts. The reason for only assigning eight users to be used as sampling is because the 
scope of the project does not involve many users. Nielsen [11], [12] the method used for task testing uses a 
Likert scale to assess positive attitudes with positive statements and negated attitudes through negative 
statements. A. Joshi et al. [13], the equation of the calculation formula to determine the number of ideal 
values obtained from the maximum value multiplied by the number of users can be seen in formula (1). 


Ideal value=5 x Many Users (1) 


To determine the index value based on the number of respondents’ values divided by the total ideal 
number of population multiplied by 100%, it can be shown in formula (2). 


total respondent score 


Index Value=( ) x 100% (2) 


ideal Number 


While the determination of the average calculation is obtained from the total number of respondents' 
values divided by the total number of ideal values multiplied by 100%, it can be seen in formula (3). 


total number of respondents score 


Average=( ) x 100% (3) 


total ideal Number 


3. RESULTS AND ANALYSIS 

The flow of activities for designing the UI/UX holistic integrative monitoring model for PAUD 
using the TCSD method has 4 stages that must be followed, namely [14], [15]; 1) identification scope of use, 
2) user centered requirements analysis, 3) design as scenario, and 4) walkthrough evaluate. 


3.1. Identification scope of use 

User identification focuses on the Kuntum Mekar school where researchers interview the 
information needs of each user related to the system and plan the content requirements needed so that the 
development of a holistic integrative monitoring system application is in accordance with existing business 
processes. This stage also determines the tasks and users involved in running the application. Interviewing 
about the tasks of each user involved in the purpose is to see the habits carried out by each user. After 
identifying the user there are 3 users where each user has a different task. Details of the tasks required by 
system users can be seen in Table 1. 


Table 1. System users by task 


User Task 
PAUD The teacher of PAUD has the task and responsibility of making master data for PAUD children, list of 
Teacher healthy menus for children of PAUD, monitoring the development of nutrition for children of PAUD, 


immunization schedule, monitoring of immunization data for children of PAUD, making health care 
schedules for children of PAUD, making monitoring of recording data on children's health development 
PAUD and make a schedule of giving vitamins for children PAUD. 

Parents PAUD parents can monitor the nutritional development of their children, monitor immunization schedules, 
provide vitamins, health care, monitor the results of children's development and health 

Health Expert Provide immunization vaccines, check the health of teeth, mouth and nails, provide vitamins and provide a 
balanced nutritional menu. 


3.2. User centered requirement analysis 
Analysis of the needs of system users is carried out through data needs analysis based on direct 
observation and interviews [16]-[18] with Kuntum Mekar's PAUD and the parents of the PAUD 's children. 

The results of the needs analysis will be used as a reference for making system improvements. There are 3 

analysis studies based on needs consisting of: 

a. Analysis of information needs, the problem faced by Kuntum Mekar is that the PAUD teacher as the 
admin has difficulty making monitoring reports on the activities they have done and PAUD 's parents 
often lose information on activities carried out by their children while at school. Based on these 
problems, it is necessary to build a UI/UX model design for a web-based application of a holistic 
integrative monitoring system for young children so that all users can interact whenever and wherever 
they are. 

b. Analysis of data storage needs, the problem faced is that the data on young children is never updated 
and is often lost, such as data on activity records for young children regarding immunization schedules, 
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healthy nutrition menu schedules, and health care schedules and poorly documented data on monitoring 
the health of young children. such as; giving vitamins, examination of teeth, and nails. 

c. Technology needs analysis, existing computer aids are still limited to the use of Microsoft office such as 
word, excel and ppt which are used as media for making reports so that errors often occur in making 
reports. Based on this, it is necessary to make a web-based PAUD children's health monitoring system 
application using the application software used are PHP, MySQL, and Laravel Web server using 
Xampp (Apache and phpMyAdmin). 


3.3. Design as scenario 

The system user activity process flow can be designed after the researcher identifies the integrative 
holistic activities carried out by PAUD Kuntum Mekar can be seen in Figure 2. The depiction of the process 
flow is divided into 3, namely: 

a. The process flow of the PAUD teacher's activities as admin 

In Figure 2 (a), you can see the flow of the system based on the activities of the PAUD teacher 
where the PAUD teacher can manage the holistic integrated monitoring website by accessing the PAUD data 
menu, the health monitoring schedule menu, the PAUD monitoring card menu, and the user menu as well as 
making reports to the PAUD school principal. 

b. Flow of user activity process as parent 

The process flow of parents’ activities in using the holistic integrative monitoring website application starts 
from the registration menu to get a user account, the immunization schedule menu, the balanced nutrition schedule 
menu, the health care menu, and the PAUD monitoring report card menu. On the health care menu, there is a 
submenu of health checkup schedules and a menu of vitamin administration. Can be seen in Figure 2 (b). 

c. Flow of user activity process as a health expert 

Health experts have an important role in the development and growth of young children. Therefore 
the holistic integrative monitoring application provides facilities for health experts to be able to access the 
system through menus, namely; 1) updating immunization data, 2) updating health care data starting from 
examining teeth, skin, and nails and updating vitamin data, and 3) updating the menu balanced nutrition. 
Digram process flow can be seen in Figure 2 (c). 

The relationship between system users can be seen in Figure 2 (d). Where the interaction between 
teachers and parents depends on each other in monitoring the health development of young children. 
Meanwhile, the involvement of experts is a source of data that will provide immunizations, health checks, 
and the provision of a balanced nutrition menu for young children. This research has produced 9 main 
scenarios of the activities of the actors involved, namely; 1) managing PAUD master data, 2) making a list of 
healthy nutrition menus, 3) nutritional care, 4) immunization schedules, 5) health maintenance schedules, 6) 
immunization schedule information, 7) information on development of PAUD, 8) recording of immunization 
activities, and 9) recording of health care activities. Hardianto and Karmilasari [8], Silva et al. [19], 
Escanillan et al. [20] Scenarios in system design are indispensable in making system applications so that 
there is no mistake in coding programs and designing UI/UX according to the needs of system users. 


3.3.1. Stroryboard design 

The following is an example of making a storyboard for immunization content on a web-based, 
holistic integrative monitoring application. Immunization scenarios based on the main tasks produced are five 
task scenarios, namely; 1) the task of recording immunizations, 2) the task of recording immunization 
schedules, 3) the task of viewing immunization schedule information, 4) the task of immunization activities, 
and 5) the task of viewing reports on immunization activities. Admin users (PAUD teachers) can make data 
changes for immunization activities, while parents can only view information on the schedule of 
immunization activities. All storyboard designs can be seen in Figure 3. 

After designing the conceptual model is complete, the next step for the researcher is to test the tasks 
that are included in designing the system application to be converted into a test scenario. Previously, 
researchers had obtained results from eight users who had been tested in a series of tests, then the users gave 
each interaction a score based on the task that had been carried out. In Table 2, you can get the ideal 
number=40 from the calculation of the number of tasks multiplied by the number of users according to 
formula (1). The value in the amount column is obtained from the total value of potential users per task. The 
test results based on the index value refer to the calculation formula (3). In the first task, there were 8 users 
with the index value=(30/40)x100%=79%. The calculation results for the second task up to the task five are 
the same as the first task. 
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Figure 2. The system user activity process flow, (a) flowchart diagram of the PAUD teacher (admin), (b) 
parent diagram activity 
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Figure 3. Stroryboard design; (a) the task of recording immunizations, (b) the task of recording immunization 
schedules (c) the task of viewing immunization schedule, (d) the task of immunization activities, (e) the task 
of reports 


Table 2. Total ideal value 


Task Number Candidat User Total Total Ideal Number Index Value 
1 3 5 4 4 4 3 4 3 30 40 79% 
2 3 5 4 5 4 4 4 4 33 40 83% 
3 4 5 4 4 4 4 4 3 32 40 80% 
4 3 3 4 5 4 4 4 4 31 40 78% 
5 4 5 4 4 3 4 4 4 32 40 80% 
Total 158 200 
Average 79% 
3.3.2. Mockup design 


Based on the storyboard design, a UI/UX mockup design has been made that has been approved by 
the system user. Hussain et al. [21] UI design uses the Marvel application tools that can be designed online. 
The following UI/UX mockups can be seen starting from Figure 4 (a)-(e). Researchers did a UI redesign after 
getting feedback from the user. This design is carried out in order to get optimal results and tailored to user 
needs. The following is an image of the UI/UX design after improvements, see Figure 4. The researcher 
continues the next testing phase to get the optimal value from the user. It can be seen in Table 3 that the 
results of user satisfaction with the model design offered increased to 84.5% from the previous average value. 
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Figure 4. UI/UX model design for immunization content, (a) record immunization data, (b) record 
immunization schedule, (c) record immunization activities 
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Figure 4. UI/UX model design for immunization content, (d) information schedule, (e) immunization report 
(continue) 


Table 3 Iteration test Table 2 
No. Task Total Total Ideal index value 


1 34 40 85% 
2 33 40 83% 
3 34 40 85% 
4 33 40 83% 
5 35 40 87,5% 
Total 169 200 
Average 84,5% 


3.4. Implementation UI/UX 
3.4.1. Walkthrough evaluate 

After designing the scenario design, a UI/UX model design will be generated for a web-based child 
health monitoring information system in PAUD Kuntum Mekar, then a walkthrough evaluation will be 
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carried out. Hussain et al. [21] , Klotins [22] all the design results as a scenario at this stage will be coded into 
the programming language using the hypertext prepocessor (PHP) script language and my structured query 
language (MySQL) database. Furthermore, the design evaluation is carried out whether it is in accordance 
with the needs of the task and the needs of the user [23]. All the design results as a scenario at this stage will 
be coded into the programming language using the PHP scripting language and the MySQL database. 


3.4.2. Usability heuristics 

UI design testing uses usability heuristics to be able to observe user activities. Observation of user 
activity is carried out directly where the user and the researcher are at the same location at one time. This is 
done so that researchers get feedback from every activity undertaken by the user . Usability heuristic has 10 
indicator variables that will be used as a tool to measure the UI that is designed. Nielsen [11], Filippi [24] 
Farzandipour et al. [25] indicators that are used as variables in the heuristic test can be seen in Table 4. 


Table 4. Heuristic usability indicators 


No Variabel Usability Heuristic Description 
1 XI Visibility of System Status 
2 X2 Compatibility between the System and the Real World 
3 X3 User Control and Freedom 
4 X4 Standards and Consistency 
5 X5 Help Users to Identify, Diagnose and Solve Problems 
6 X6 Error Prevention 
7 X7 There is an introduction 
8 X8 Flexibility and Efficiency 
9 X9 Minimalist Design and Aesthetics 
10 X10 Help and Documentation Features 


After the task is made and tested, the overall assessment results of all integrated holistic monitoring 
application modules can be seen in Table 5. Based on Table 5, the average value index of the test results is 
91%, it is means the users are satisfied with the final achievement. These results also indicate that the user 
has understood all the tasks used to design a web-based integrative holistic monitoring application system 
[26]-[28]. 


Table 5. The results assessment of heuristic usability indicators 


Variabel Usability Heuristic Description Total Ideal Value Index Value 
XI Visibility of System Status 120 125 96% 
X2 Compatibility between the System and the Real World 135 150 90% 
X3 User Control and Freedom 140 150 93% 
X4 Standards and Consistency 110 125 88% 
X5 Help Users to Identify, Diagnose and Solve Problems 145 150 97% 
X6 Error Prevention 80 100 80% 
X7 There is an introduction 70 75 93% 
X8 Flexibility and Efficiency 90 100 90% 
X9 Minimalist Design and Aesthetics 115 125 92% 

X10 Help and Documentation Features 160 175 91% 
Total 1165 1275 
Avarage 91% 


4. CONCLUSION 

The conclusion of this study is that UI/UX design using the TCSD method for web-based 
applications can run on an intranet network or the internet. The development of this system is for easy data 
availability, easy data update management, user-friendly menus, and reporting. UI/UX design testing uses 
satisfaction with test results of 84.5%. This proves that the preparation of the designed tasks has answered 
user needs. The usability system test uses a usability heuristic by using ten indicators are used as 
measurement variables. The test result was 91%. Based on these conclusions, this study suggests are the 
development of mobile app-based applications can be continued so that parents can more easily monitor 
every activity carried out by the PAUD school. Besides, applications can be developed integrated with 
population data in Baros Serang District, Banten. 
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